<template>
    <!-- <el-menu :default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect" -->
      <!-- background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> -->
      <!-- <el-menu-item index="1" @click="$router.push('/customer')">京宝首页</el-menu-item>
      <el-menu-item index="3" @click="$router.push('/phone')">电子产品</el-menu-item>
      <el-menu-item index="4" @click="$router.push('/Man')">男士用品</el-menu-item>
      <el-menu-item index="5" @click="$router.push('/Woman')">女士用品</el-menu-item>
      <el-menu-item index="6" @click="$router.push('/Car')">汽车专区</el-menu-item>
      <el-menu-item  index="7" @click="$router.push('/Battle')">俄乌战争用品</el-menu-item>
      <el-menu-item index="8" @click="$router.push('/Sport')">体育专区</el-menu-item>
      <el-menu-item  v-if=" user.role===1" index="9" @click="$router.push('/Cart') ">购物车</el-menu-item>

      <el-menu-item index="9" v-if=" user.role===3||user.role===2" @click="$router.push('/Storage')">
        <el-icon><goods /></el-icon>
        <template #title>商品管理</template>
      </el-menu-item>
      <el-menu-item index="cart"  v-if=" user.role===2||user.role===1" @click="$router.push('/Order')">
        订单管理</el-menu-item>
       <template v-slot:title> {{user.nickName}}<span class="el-dropdown-link" >
               
                <el-icon><arrow-down-bold /></el-icon>
              </span>
                </template> --> 
       <!-- <el-menu-item index="user" v-if="user.role===3" @click="$router.push('/User')"><el-icon><user-filled /></el-icon><template #title>用户管理</template></el-menu-item>
     
      <el-menu-item index="2-3" @click="2 - 3" v-if=" user.role===1"><router-link to="/"></router-link>我要成为商家</el-menu-item>
      <el-menu-item index="2-2" @click="logout">退出系统</el-menu-item>

      <el-menu-item index="2-1" @click="$router.push('/person')">{{ user.nickName }},你好</el-menu-item> --> 

    <!-- </el-menu> -->
    <div style="width: 100px">
    </div>
  
</template>

<script>
import { defineComponent } from "vue";
import { ArrowDownBold } from '@element-plus/icons-vue';
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
  ShoppingCart,
  Goods,
  List,
  UserFilled,
  Timer


} from '@element-plus/icons-vue'

export default defineComponent({



  name: "Header",
  props: ['user'],
  data() {
    return {
      user: {},
     
    }
  },
  created() {
    let str = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(str)
  },
  components: {
    ArrowDownBold,
    Location,
    Document,
    Setting,
    IconMenu,
    ShoppingCart,
    Goods,
    List,
    UserFilled,
    Timer,
  },
  methods: {
    logout() {
      sessionStorage.setItem("user", JSON.stringify(null))
      this.$router.push('/login')
    },
    navigateToCategory(categoryId) {
      // 根据分类 ID 进行页面跳转或其他操作
      console.log('Navigate to category:', categoryId);
      // 例如使用 Vue Router 导航到对应的分类页面
      // this.$router.push({ name: 'Category', params: { categoryId } });
    }
  }
})
</script>

<style scoped>
.el-menu-demo {
  width: 100%;
  /* 确保菜单宽度为100% */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  /* 确保父容器宽度为100% */
}

.el-menu-item {
  width: 135px;
}
</style>